<template>
  <div class="login-container">
    <h1 style="margin-bottom: 50px;">夏令营管理系统</h1>
    <el-form :model="loginForm" :rules="rules" label-position="left" label-width="60px" style="width: 400px;">
        <el-form-item label="账号" prop="loginName">
            <el-input v-model="loginForm.loginName"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
            <el-input v-model="loginForm.password"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" style="width: 100%;" @click="loginOption(loginForm)">登录</el-button>
        </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { login } from '@/api/common';
import router from '@/router';
import { Message } from 'element-ui';
export default {
  data(){
    return{
      loginForm:{
        loginName:'',
        password:''
      },
      rules:{
          loginName:[{required:true,message:"请输入账号"}],
          password:[{required:true,message:"请输入密码"}],
      }
    }
  },
  methods:{
    loginOption(data){
      login(data).then(res=>{
        console.log(1,res);
        this.$cookies.set('cp-token',res.data,"3d");
        Message.success(res.msg)
        router.replace('/camp/index')
      }).catch(()=>{})
    }
  }
}
</script>

<style>
.login-container{
  width: fit-content;
  padding: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 300px auto;
  border: 1px solid #cccaca;
  border-radius: 10px;
}
</style>